<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<div class="container mx-auto flex flex-col flex-1 p-4 sm:max-w-4xl">
    <!-- Message List -->
    <div class="flex-1 overflow-y-auto bg-white rounded-lg shadow-md p-4">
        <c:forEach var="message" items="${messages}">
            <c:choose>
                <c:when test="${message.type == 'left'}">
                    <div class="mb-4 flex items-start">
                        <div class="avatar">
                            <div class="w-10 h-10 rounded-full">
                                <img src="${message.avatar}" alt="User Avatar">
                            </div>
                        </div>
                        <div class="ml-3">
                            <div class="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg max-w-xs">
                                    ${message.text}
                            </div>
                            <span class="text-sm text-gray-500">${message.time}</span>
                        </div>
                    </div>
                </c:when>
                <c:when test="${message.type == 'right'}">
                    <div class="mb-4 flex items-end justify-end">
                        <div class="mr-3">
                            <div class="bg-blue-500 text-white px-4 py-2 rounded-lg max-w-xs">
                                    ${message.text}
                            </div>
                            <span class="text-sm text-gray-500 text-right block">${message.time}</span>
                        </div>
                        <div class="avatar">
                            <div class="w-10 h-10 rounded-full">
                                <img src="${message.avatar}" alt="User Avatar">
                            </div>
                        </div>
                    </div>
                </c:when>
                <c:otherwise>
                    <div class="text-sm text-gray-500">Message type is invalid.</div>
                </c:otherwise>
            </c:choose>
        </c:forEach>
    </div>

    <!-- Input Area -->
    <div class="mt-4 bg-white rounded-lg shadow-md p-4 flex items-center">
        <form action="<c:url value="/chat"/>" method="POST" class="flex w-full">
            <input
                    type="text"
                    name="message"
                    placeholder="Type your message..."
                    class="custom-input flex-1 input input-bordered focus:outline-none focus:ring-2 focus:ring-green-300"
            />
            <button type="submit" class="btn btn-primary ml-2">Send</button>
        </form>
    </div>
</div>
